<template>
    <div class="setting">
        <div class="header">
            <!-- 头部左侧 -->
            <div class="left" @click="$router.back()">&lt;</div>
            <!-- 头部标题 -->
            <div class="title">设置</div>
            <!-- 头部右侧 -->
            <div class="right"></div>
        </div>
        <!-- 用户信息 -->
        <div class="user">
            <div class="user_img">
                <img :src="userInfo.header_img" alt="">
            </div>
            <div class="user_info">
                <h3>{{userInfo.name || 'OMINI.BASS'}}</h3>
                <p>{{userInfo.phone}}</p>
            </div>
            <nut-button @click="$router.push('/editpersonal')" color="#C1AB96" size="small" plain>编辑</nut-button>
        </div>
        <!-- 手机号修改 -->
        <router-link to="/editphone" class="phone item_bar">
            <span>手机号修改</span>
            <i>&gt;</i>
        </router-link>
        <!-- 隐私条款 -->
        <router-link to="/settingyinsi" class="yinsi item_bar">隐私条款</router-link>
        <!-- 问题反馈 -->
        <div class="item_bar">
            <span>问题反馈</span>
            <i>&gt;</i>
        </div>
        <!-- 检查更新 -->
        <div class="item_bar check">
            <span>检查更新</span>
            <i>V6.0</i>
        </div>
        <!-- 退出登录 -->
        <nut-button class="unlogin" color="#d1082a" block type="primary" @click="visible = true">退出登录</nut-button>

        <!-- 提示框 -->
        <nut-dialog teleport="#app" title="提示" content="确定退出登录？" v-model:visible="visible">
            <template #footer>
                <nut-button @click="visible = false" size="small" color="#C1AB96" plain>取消</nut-button>
                <nut-button @click="unlogin" size="small" color="#C1AB96" plain>确定</nut-button>
            </template>
        </nut-dialog>
    </div>
</template>

<script>
export default {
    name: 'settingView',
    data() {
        return {
            visible: false,
        }
    },
    methods: {
        unlogin() {
            this.visible = false
            localStorage.removeItem('token')
            this.$router.push('/')
        },
    },
    computed: {
        // 用户信息对象
        userInfo() {
            return this.$store.state.userInfo
        },
        // 重新拼接隐藏手机号
        // phoneNum() {
        //     return `${this.userInfo.phone.slice(
        //         0,
        //         3
        //     )}****${this.userInfo.phone.substr(-4)}`
        // },
    },
    mounted() {
        // 请求用户信息
        this.$store.dispatch('getUserInfo')
    },
}
</script>

<style lang="scss" scoped>
a {
    display: block;
    text-decoration: none;
    color: #000;
}
.setting {
    background-color: #ebe9e5;
    height: 100vh;
    .header {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 2.667vw 3.733vw;
        height: 17.067vw;
        font-size: 4.267vw;
        font-weight: 700;
        background-color: #fff;

        .left {
            width: 13.333vw;
            color: #c1ab96;
        }
        .right {
            width: 13.333vw;
            padding-bottom: 0.8vw;
            font-size: 3.2vw;
            font-weight: 400;
            text-align: center;
        }
    }
    .user {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 18.667vw;
        padding: 0 2.667vw;
        background-color: #fff;
        .user_img {
            width: 13.333vw;
            height: 13.333vw;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .user_info {
            width: 230px;
            h3 {
                font-size: 3.733vw;
            }
            p {
                font-size: 3.2vw;
            }
        }
    }
    .item_bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 12.8vw;
        padding: 0 3.2vw;
        background-color: #fff;
        font-size: 3.733vw;
    }
    .phone {
        margin-top: 2.667vw;
    }
    .yinsi {
        margin-top: 2.667vw;
    }
    .check {
        margin-top: 2.667vw;
        i {
            color: #999;
        }
    }
    .unlogin {
        margin: 66.133vw auto 0 auto;
        width: 91.2vw;
    }
}
</style>